<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-6">
      <h3 class="font-medium text-gray-800">简历附件</h3>
      <div class="text-sm text-gray-500">支持 PDF、Word 格式</div>
    </div>
    
    <div 
      @drop="handleDrop"
      @dragover.prevent
      @dragenter.prevent
      class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:border-primary/50 transition-colors duration-200"
    >
      <input 
        ref="fileInput"
        type="file" 
        class="hidden" 
        accept=".pdf,.doc,.docx"
        @change="handleFileSelect"
      >
      <div @click="$refs.fileInput?.click()" class="cursor-pointer">
        <div class="w-16 h-16 bg-gray-50 rounded-full mx-auto mb-4 flex items-center justify-center">
          <i class="ri-upload-cloud-line text-gray-400 text-2xl"></i>
        </div>
        <div class="text-gray-600 mb-2">点击或拖拽文件到这里上传</div>
        <div class="text-sm text-gray-500">单个文件不超过 10MB</div>
      </div>
    </div>
    
    <div class="mt-4 space-y-2">
      <div v-for="file in uploadedFiles" :key="file.id" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
        <div class="flex items-center">
          <div class="w-8 h-8 bg-blue-50 rounded flex items-center justify-center mr-3">
            <i class="ri-file-text-line text-blue-500"></i>
          </div>
          <div>
            <div class="text-sm font-medium text-gray-800">{{ file.name }}</div>
            <div class="text-xs text-gray-500">{{ file.size }} · {{ file.date }}</div>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <button @click="downloadFile(file)" class="p-1.5 hover:bg-gray-200 rounded-full">
            <i class="ri-download-line text-gray-500"></i>
          </button>
          <button @click="deleteFile(file.id)" class="p-1.5 hover:bg-gray-200 rounded-full">
            <i class="ri-delete-bin-line text-gray-500"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const uploadedFiles = ref([
  {
    id: '1',
    name: '个人简历.pdf',
    size: '2.5MB',
    date: '2025-06-16'
  }
])

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    handleFiles(target.files)
  }
}

const handleDrop = (event: DragEvent) => {
  event.preventDefault()
  if (event.dataTransfer?.files) {
    handleFiles(event.dataTransfer.files)
  }
}

const handleFiles = (files: FileList) => {
  Array.from(files).forEach(file => {
    if (file.size > 10 * 1024 * 1024) {
      alert('文件大小不能超过 10MB')
      return
    }
    
    if (!['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(file.type)) {
      alert('只支持 PDF 和 Word 格式的文件')
      return
    }
    
    const newFile = {
      id: Date.now().toString(),
      name: file.name,
      size: (file.size / (1024 * 1024)).toFixed(1) + 'MB',
      date: new Date().toLocaleDateString('zh-CN')
    }
    
    uploadedFiles.value.unshift(newFile)
    alert('文件上传成功')
  })
}

const downloadFile = (file: any) => {
  alert(`下载文件: ${file.name}`)
}

const deleteFile = (fileId: string) => {
  const index = uploadedFiles.value.findIndex(file => file.id === fileId)
  if (index !== -1) {
    uploadedFiles.value.splice(index, 1)
    alert('文件已删除')
  }
}
</script>
